<!DOCTYPE html>
<html>
<head>
    <title>David Bardwell - homework 4</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
    <script src="mapquest.js"></script>
    <style type="text/css">
        #from, #to {
            background-color: black;
        }
    </style>
</head>

<!-- skip header and footer to maximize real estate for the directions -->
<body>
    <div data-role="page">

        <!-- first div is for entering the directions, 
             I made the background color black -->
        <div style="background-color: black" id="content_div" data-role="content">
            <label for="from">From:</label>
            <input type="search" name="from" id="from" value="Boston, MA"/>
        
            <label for="to">To:</label>
            <input type="search" name="to" id="to" value="New York, NY"/>
        </div>
    
        <!-- second div is for the directions output which is 
             completed via ajax call in mapquest.js -->
        <div data-role="content">
            <ul id="directionList" data-role="listview" data-inset="true">

            </ul>
        </div>
    </div>
</body>
</html>
